<html>
    <head>
        <title>index5.html</title>
    </head>
    
<body style="background-color:aquamarine">
    
    <div class="group">                      
        <!-- 输入框-->
        Text:<input type="text" class = "todovalue" name="todovalueName" id = "todovalueId" placeholder="please input" 
            onkeydown="valueChange(event)" />             
        <input type="button" value="BUTTON2" onclick="handleClick()"></input>
        <button type="button" id="button3">BUTTON3</button>

        <!-- 遍历数据 -->
        <div id="todolist">
            
            
            
        </div>
        
        <!-- 操作的footer -->
        
    </div>
</body>

<script lang="javascript">
    var index = 0;
    function init(){
        document.getElementById("button3").onclick = handleClick;
    }
    
    function valueChange(e){
        console.log(e);
        if(event.keyCode == 13){
            handleClick();
        } 
    }

    var index = 0
    function handleClick(){
        var temp = document.getElementsByName("todovalueName")[0].value;
        var div = document.createElement("div");
        //div.innerHTML = temp;

        var t = "<div class='item' id ='item"+index+ "'>"
            + "  <input class='item-chk' type='checkbox' />"
            + "  <div class='item-sp'>" + temp + "</div>"
            + "  <input id='item-del-"+index+"' class='item-del' type='button' value='删除' onclick='handleDelClick("+index+")'></input>"
            + "  </div>"

        index++;
        //div.innerHTML
        document.getElementById("todolist").innerHTML += t
    }
    
    function test1(index){
        //console.log("test111");
        //document.getElementById("todolist").children[index].style = "background-color: blue";
        //document.getElementById("item-del-"+index).style = "opacity: 1;";
    }

    function test2(index){
        //onsole.log("test222");
        //document.getElementById("todolist").children[index].style = "";
        //document.getElementById("item-del-"+index).style = "opacity: 0;";
    }

    function handleDelClick(index){
        var arr = document.getElementById("todolist");
        console.log(arr);
        document.getElementById("item"+ index).remove();
    }

    init();
</script>

<style>
    body{
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }
    .group{
        border: 1px solid blue;
        padding: 10px;

        border-radius: 20px;
    }

/* sass less */

    .item{
        margin: 3px;
        padding: 3px;
        border-radius: 4px;
        display: flex;
        align-items: center;
    }

    .item:hover{
        background-color: aqua;

        transform: scale(1,2);
    }

    .item-sp{
        flex-grow: 1;
    }

    .item-del{
        background-color: rgb(230, 22, 22);
        border: 0px;
        color: aliceblue;

        opacity: 0;
    }

    .item:hover .item-del{
        opacity: 1;
    }

    .todovalue{
        border: 2px solid #8f1212;
        padding: 6px;
        outline: none;
    }
</style>

</html>